<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>RichSelector - ESUI Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../../../dep/esui/3.2.0-beta.2/demo/assets/google-code-prettify/prettify.css"/>
        <link rel="stylesheet" href="./assets/themes/standard.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="../../../dep/esui/3.2.0-beta.2/demo/assets/ie8.css"/>
        <![endif]-->
    </head>
<body>
    <div class="header">
        <h1 id="branding">ESUI RichSelector</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>单一选择Table Selector</h2>
            <div class="example">
                <div class="row">
                    <h3>单一选择Table Selector</h3>
                    <div
                        data-ui-type="RichSelectorGroup"
                        data-ui-id="single-slots"
                        data-ui-name="single-slots">
                        <esui-table-rich-selector-pro
                            data-ui-id="single-slots-source"
                            data-ui-child-name="source"
                            data-ui-title="全部有效"
                            data-ui-has-head="true"
                            data-ui-has-search-box="true"
                            data-ui-need-batch-action="true"
                            data-ui-allow-unselect-node="true"
                            data-ui-batch-action-label="选择全部"
                            data-ui-states="no-hover-icon">
                        </esui-table-rich-selector-pro>
                    </div>
                </div>
                <esui-button data-ui-id="get-single-slots">获取选值</esui-button>
                <esui-label data-ui-id="single-slots-result"></esui-label>
            </div>

            <h2>左右选择Table Selector</h2>
            <p>右两个列表型富选择器组成，支持从左侧添加到右侧，支持从右侧删除。</p>
            <div class="example">
                <div class="row">
                    <h3>双向Table Rich Selector</h3>
                    <div
                        data-ui-type="RichSelectorGroup"
                        data-ui-id="cas-slots"
                        data-ui-name="cas-slots">
                        <esui-table-rich-selector-pro
                            data-ui-id="cas-slots-source"
                            data-ui-child-name="source"
                            data-ui-title="全部有效"
                            data-ui-has-head="true"
                            data-ui-has-search-box="true"
                            data-ui-has-target="true"
                            data-ui-need-batch-action="true"
                            data-ui-allow-unselect-node="true"
                            data-ui-batch-action-label="选择全部">
                        </esui-table-rich-selector-pro>
                        <esui-table-rich-selector-pro
                            data-ui-id="cas-slots-target"
                            data-ui-child-name="target"
                            data-ui-title="已选择"
                            data-ui-mode="delete"
                            data-ui-need-batch-action="true"
                            data-ui-batch-action-label="删除全部"
                            data-ui-empty-text="请从左侧选择要添加的">
                        </esui-table-rich-selector-pro>
                    </div>
                </div>
                <esui-button data-ui-id="get-cas-slots">获取选值</esui-button>
                <esui-label data-ui-id="cas-slots-result"></esui-label>
            </div>

        </div>
    </div>
    <script src="../../../dep/esui/3.2.0-beta.2/demo/assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="../../../dep/esui/3.2.0-beta.2/demo/demo.js"></script>
    <script src="../../../dep/esui/3.2.0-beta.2/demo/assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'ub-ria-ui/selectors/RichSelectorGroup',
            'TableRichSelectorPro',
            'esui/Tab',
            'demo'
        ],
        function (ui) {
            var arrayDatasource = [];
            for (var i = 0; i < 20; i++) {
                arrayDatasource.push({
                    text: '选项' + (i + 1),
                    name: '选项' + (i + 1),
                    prop: '属性' + (i + 1),
                    id: i + 1
                });
            }

            ui.init(
                document.body,
                {
                    properties: {
                        "single-slots-source": {
                            datasource: arrayDatasource,
                            fields: [
                                {
                                    field: 'name',
                                    content: function (item) {
                                        return item.name;
                                    },
                                    sortable: false,
                                    searchScope: 'partial',
                                    
                                    width: 50,
                                    isDefaultSearchField: true,
                                    title: '名称'
                                },
                                {
                                    field: 'id',
                                    content: function (item) {
                                        return item.id;
                                    },
                                    sortable: true,
                                    
                                    width: 50,
                                    title: 'id'
                                }
                            ],
                            footerLinks: [
                                {name: 'add', text: '++++++'},
                                {name: 'remove', text: '------'}
                            ]
                        },
                        "cas-slots-source": {
                            datasource: arrayDatasource,
                            fields: [
                                {
                                    field: 'name',
                                    content: function (item) {
                                        return item.name;
                                    },
                                    searchScope: 'partial',
                                    width: 100,
                                    isDefaultSearchField: true,
                                    title: '名称'
                                },
                                {
                                    field: 'value',
                                    content: function (item) {
                                        return item.prop;
                                    },
                                    width: 35,
                                    title: '值'
                                }
                            ],
                            footerLinks: [
                                {name: 'add', text: '++++++'},
                                {name: 'remove', text: '------'}
                            ]
                        },
                        "cas-slots-target": {
                            fields: [
                                {
                                    field: 'name',
                                    content: function (item) {
                                        return item.name;
                                    },
                                    isDefaultSearchField: true,
                                    searchScope: 'partial',
                                    width: 120,
                                    title: '名称'
                                },
                                {
                                    field: 'value',
                                    content: function (item) {
                                        return item.prop;
                                    },
                                    width: 35,
                                    title: '值'
                                }
                            ]
                        }
                    }
                }
            );

            var single = ui.get('single-slots');
            var singleSource = ui.get('single-slots-source');
            singleSource.on('footerLinkClick', function (e) {
                console.log(e.link.name + ' clicked.');
            });
            ui.get('get-single-slots').on('click', function () {
                ui.get('single-slots-result').setText(single.getValue());
            });

            var cascading = ui.get('cas-slots');
            ui.get('get-cas-slots').on('click', function () {
                ui.get('cas-slots-result').setText(cascading.getValue());
            });

            
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>

